<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <!-- import CSS -->
    <link
            rel="stylesheet"
            href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style>
        form {
            width: 600px;
            height: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #ccc;
            display: none;
            border-radius: 8px;
        }

        form div {
            width: 600px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid #ccc;

        }

        form div lable {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            display: inline-block;
        }

        form div input {
            width: 200px;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 5px;
            outline: none;
        }
    </style>
</head>
<body>
<div id="app">
    <!--    搜索框-->
    <el-input v-model="input" placeholder="通过id搜索"></el-input>
    <el-button type="primary" @click="handleSearch">搜索</el-button>
    <el-button type="primary" @click="addFn">添加</el-button>
    <el-button type="primary" @click="showAll">显示全部</el-button>
    <!--遍历-->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="180"></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
        <el-table-column prop="class1" label="班级"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                >编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                >删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--    表单-->
    <form action="">
        <div>
            <lable>id:</lable>
            <input type="number" v-model="id">
        </div>
        <div>
            <lable>name:</lable>
            <input type="text" v-model="name">
        </div>
        <div>
            <lable>age:</lable>
            <input type="number" v-model="age">
        </div>
        <div>
            <lable>sex:</lable>
            <input type="text" v-model="sex">
        </div>
        <div>
            <lable>class:</lable>
            <input type="text" v-model="class1">
        </div>
        <el-button type="primary" @click="submit">添加</el-button>
        <el-button type="primary" @click="guanbi">关闭</el-button>
    </form>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                tableData: [],
                input: "",
                id: "",
                name: "",
                age: '',
                sex: '',
                class1: ''
            };
        },

        methods: {
            showAll() {
                axios
                    .get(`http://localhost:9999/student/findAll`)
                    .then((res) => {
                        // console.log(res.data);
                        this.tableData = res.data;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },

            addFn() {
                document.querySelector("form").style.display = "block";

            },
            guanbi(){
                document.querySelector("form").style.display = "none";
            },
            submit() {
                axios.get(`http://localhost:9999/student/add?id=${this.id}&name=${this.name}&age=${this.age}&sex=${this.sex}&class1=${this.class1}`)
                    .then(function (response) {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                document.querySelector("form").style.display = "none";
                window.location.reload();
            },

            // 搜索方法，将搜索到的数据替换为原来的数据
            handleSearch() {
                axios
                    .get(`http://localhost:9999/student/findById/${this.input}`)
                    .then((res) => {
                        console.log(res.data);
                        this.$message({
                            message: "搜索成功",
                            type: "success",
                        });
                        // 将对象转化为数组
                        res.data = [res.data];
                        this.tableData = res.data;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },

            handleEdit(index, rows) {
                console.log(index, rows);
                id = rows.id;
                console.log(id);
                this.$prompt("请输入姓名", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    inputErrorMessage: "请输入2-4个汉字",
                })
                    .then(({value}) => {
                        const name = value;
                        this.$prompt("请输入年龄", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            inputErrorMessage: "请输入正整数",
                        })
                            .then(({value}) => {
                                const age = value;
                                this.$prompt("请输入性别", "提示", {
                                    confirmButtonText: "确定",
                                    cancelButtonText: "取消",
                                    inputErrorMessage: "请输入2-4个汉字",
                                })
                                    .then(({value}) => {
                                        const sex = value;
                                        this.$prompt("请输入班级", "提示", {
                                            confirmButtonText: "确定",
                                            cancelButtonText: "取消",
                                            inputErrorMessage: "请输入2-4个汉字",
                                        })
                                            .then(({value}) => {
                                                const class1 = value;
                                                console.log(name, age, sex, class1);
                                                this.$message({
                                                    type: "success",
                                                    message: "修改成功!",
                                                });
                                                axios.get(
                                                    `http://localhost:9999/student/update/${id}?&name=${name}&age=${age}&sex=${sex}&class1=${class1}`)
                                                    .then((res) => {
                                                        console.log(res.data);
                                                        //     页面刷新
                                                        window.location.reload();
                                                    })
                                                    .catch((error) => {
                                                        console.log(error);
                                                    });
                                            })
                                            .catch(() => {
                                                this.$message({
                                                    type: "info",
                                                    message: "取消输入",
                                                });
                                            });
                                    })
                                    .catch(() => {
                                        this.$message({
                                            type: "info",
                                            message: "取消输入",
                                        });
                                    });
                            })
                            .catch(() => {
                                this.$message({
                                    type: "info",
                                    message: "取消输入",
                                });
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "取消输入",
                        });
                    });
            },

            // 删除
            handleDelete(index, row) {
                axios
                    .get(`http://localhost:9999/student/deleteById/${row.id}`)
                    .then((res) => {
                        this.$message({
                            message: "删除成功",
                            type: "success",
                        });
                        // 页面刷新

                        window.location.reload();
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
        },

        // 页面加载时调用
        mounted() {

            axios
                .get("http://localhost:9999/student/findAll")
                .then((res) => {
                    this.tableData = res.data;
                })
                .catch((error) => {
                    console.log(error);
                });
        }
        ,
    })
    ;
</script>

</html>
